import icon from "../../assets/mylib.png";
import LoginBadge from "../commons/LoginBadge.tsx";
import {PageType} from "./PageType.ts";
import SidebarItemProfile from "./SidebarItemProfile.tsx";
import {useState} from "react";


const SideBarProfile = ({updateContent}: { updateContent: (args: PageType) => void }) => {
    const [activeNavLink, setActiveNavLink] = useState("library-nav-link");

    return (
        <div id="sidebar" className="d-flex flex-column flex-shrink-0 p-3 sidebar shadow-sm">
            <ul className="nav nav-pills flex-column mb-auto">
                <SidebarItemProfile
                    img={icon}
                    title="Library"
                    isActive={activeNavLink === "library-nav-link"}
                    onClick={() => {
                        setActiveNavLink("library-nav-link");
                        updateContent(PageType.LIBRARY);
                    }}
                />

                <SidebarItemProfile
                    img={icon}
                    title="Orders"
                    isActive={activeNavLink === "orders-nav-link"}
                    onClick={() => {
                        setActiveNavLink("orders-nav-link");
                        updateContent(PageType.ORDERS);
                    }}
                />

                <SidebarItemProfile
                    img={icon}
                    title="Lending"
                    isActive={activeNavLink === "lending-nav-link"}
                    onClick={() => {
                        setActiveNavLink("lending-nav-link");
                        updateContent(PageType.LENDING);
                    }}
                />
            </ul>
            <LoginBadge/>
        </div>
    );
};

export default SideBarProfile